import React, { Component } from 'react';
import { connect } from 'react-redux'
import moment from 'moment'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;
const confirm = Modal.confirm;
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class DoTransferModal extends Component {
    constructor(props) {
        super(props)
    }

    okHandler = () => {
        const { onOk,dispatch } = this.props;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                confirm({
                    title: '提示',
                    content: '确认迁移？',
                    onOk() {
                        for (var i = 0; i < values.transferDetailList.length; i++) {
                            values.transferDetailList[i].id = values.transferDetailList[i].id_;
                            values.transferDetailList[i].transferId = values.transferDetailList[i].transferId_;
                            values.transferDetailList[i].assetId = values.transferDetailList[i].assetId_;
                            values.transferDetailList[i].originalManageBranchId = values.transferDetailList[i].originalManageBranchId_;
                            values.transferDetailList[i].originalUseBranchId = values.transferDetailList[i].originalUseBranchId_;
                            values.transferDetailList[i].originalRoomId = values.transferDetailList[i].originalRoomId_;
                            values.transferDetailList[i].originalRackId = values.transferDetailList[i].originalRackId_;
                            values.transferDetailList[i].targetManageBranchId = values.transferDetailList[i].targetManageBranchId_;
                            values.transferDetailList[i].targetUseBranchId = values.transferDetailList[i].targetUseBranchId_;
                            values.transferDetailList[i].targetRoomId = values.transferDetailList[i].targetRoomId_;
                            values.transferDetailList[i].targetRackId = values.transferDetailList[i].targetRackId_;
                            values.transferDetailList[i].pullOffId = values.transferDetailList[i].pullOffId_;
                            values.transferDetailList[i].putOnId = values.transferDetailList[i].putOnId_;
                            values.transferDetailList[i].originalEndUser = values.transferDetailList[i].originalEndUser_;
                            values.transferDetailList[i].targetEndUser = values.transferDetailList[i].targetEndUser_;
                        }
                        dispatch({
                            type: `transfer/doTransfer`,
                            payload: values,
                        })
                    },
                });
            }
        });
    };

    onCancel = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'transfer/hideDoTransferViewModal',
        })
    }

    render() {
        const { children, dispatch, assetType, assetList, id, transferDetailList, item, roomList, assetBrandList, userList, addDetailHandler } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
          };
          const formItemLayout1 = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
          };

        const getRoom = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        })

        const getUser = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        })

        const columns = [{
            title: '资产编号',
            dataIndex: 'assetNo',
            key: 'assetNo',
            fixed: 'left',
            width: 150
        }, {
            title: '资产分类',
            dataIndex: 'typeName',
            key: 'typeName',
            width: 120
        }, {
            title: '设备名称',
            dataIndex: 'assetName',
            key: 'assetName',
            width: 150
        }, {
            title: '设备型号',
            dataIndex: 'modelName',
            key: 'modelName',
            width: 120,
        }, {
            title: '设备序列号',
            dataIndex: 'serialNo',
            key: 'serialNo',
            width: 150,
        }, {
            title: 'RFID编码',
            dataIndex: 'rfidNo',
            key: 'rfidNo',
            width: 100,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: (value, row, index) => {
                return (
                  value == 1 ? "已迁移" : value == 2 ? "未迁移" : ''
                )
            }
        },
        {
            title: '原管理部门',
            dataIndex: 'originalManageBranchName',
            key: 'originalManageBranchName',
            width: 150,
        },
        {
            title: '原领用部门',
            dataIndex: 'originalUseBranchName',
            key: 'originalUseBranchName',
            width: 150,
        },
        {
            title: '原领用人',
            dataIndex: 'originalEndUserName',
            key: 'originalEndUserName',
            width: 120,
        },
        {
            title: '原机房',
            dataIndex: 'originalRoomName',
            key: 'originalRoomName',
            width: 160,
        }, {
            title: '原机柜',
            dataIndex: 'originalRackName',
            key: 'originalRackName',
            width: 120,
        },
        {
            title: '原起始U位',
            dataIndex: 'originalStart',
            key: 'originalStartU',
            width: 100,
        }, {
            title: '原结束U位',
            dataIndex: 'originalEnd',
            key: 'originalEndU',
            width: 100,
        },
        {
            title: '目标管理部门',
            dataIndex: 'targetManageBranchName',
            key: 'targetManageBranchName',
            width: 150,
        },
        {
            title: '目标领用部门',
            dataIndex: 'targetUseBranchName',
            key: 'targetUseBranchName',
            width: 150,
        },
        {
            title: '目标领用人',
            dataIndex: 'targetEndUserName',
            key: 'targetEndUserName',
            width: 120,
        },
        {
            title: '目标机房',
            dataIndex: 'targetRoomName',
            key: 'targetRoomName',
            width: 160,
        }, {
            title: '目标机柜',
            dataIndex: 'targetRackName',
            key: 'targetRackName',
            width: 120,
        },
        {
            title: '目标起始U位',
            dataIndex: 'targetStart',
            key: 'targetStart',
            width: 100,
        }, {
            title: '目标结束U位',
            dataIndex: 'targetEnd',
            key: 'targetEnd',
            width: 100,
        },
            // {
            //     title: '操作',
            //     key: 'operation',
            //     fixed: 'right',
            //     width: 60,
            //     render: (text, record) => (
            //         <span> 
            //           <a onClick={this.onEditTransfer.bind(null, record.id_)}>编辑</a>
            //         </span>
            //     ),
            //   }
        ];

        return (
            <span>
                <Modal
                    maskClosable={this.props.maskClosable}
                    confirmLoading={this.props.confirmLoading}
                    title={this.props.title}
                    width={1000}
                    zIndex={100}
                    visible={this.props.visible}
                    onOk={this.okHandler}
                    onCancel={this.onCancel}
                    key={this.props.newKey}
                >
                    <div style={{ width: 'auto', position: 'relative', backgroundColor: '#fff' }}>
                        <div style={{ }}>
                            <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                                <Form layout={'inline'} style={{ marginTop: '-16px' }}>
                                    <FormItem style={{ marginBottom: '0px' }}>
                                        {getFieldDecorator('transferDetailList', { initialValue: transferDetailList })(
                                            <Input type="hidden" />
                                        )}
                                    </FormItem>
                                    <FormItem style={{ marginBottom: '0px' }}>
                                        {getFieldDecorator('operatorBy', { initialValue: item.operatorBy_ + '' })(
                                            <Input type="hidden" />
                                        )}
                                    </FormItem>
                                    <Row gutter={16}>
                                        <Col span={8}>
                                            <FormItem
                                                label="单号"
                                                {...formItemLayout1}
                                            >
                                                {
                                                    getFieldDecorator('id', {
                                                        initialValue: item.id_,
                                                    })(<Input readOnly="readOnly" style={{ width: '180px' }} />)
                                                }
                                            </FormItem>
                                        </Col>
                                        <Col span={8}>
                                            <FormItem
                                                label="操作人"
                                                {...formItemLayout1}
                                            >
                                                {getFieldDecorator('userName', {
                                                    initialValue: item.userName,
                                                })(<Input readOnly="readOnly" style={{ width: '180px' }} />)}
                                            </FormItem>
                                        </Col>
                                        <Col span={8}>
                                            <FormItem
                                                label="预计执行时间"
                                                {...formItemLayout}
                                            >
                                                {getFieldDecorator('executeTime', {
                                                    initialValue: item.executeTime,
                                                })(<Input readOnly="readOnly" style={{ width: '190px' }} />)}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row style={{ marginTop: '20px' }}>
                                        <Col span={24}>
                                            <FormItem
                                                label="迁移备注"
                                            >
                                            {
                                                getFieldDecorator('remark', {
                                                    initialValue: item.remark,
                                                })(<Input style={{ width: '865px' }} readOnly="readOnly" type="textarea" autosize={{ minRows: 3, maxRows: 3 }} />)
                                            }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row style={{ marginTop: '15px' }}>
                                        <Col span={24}>
                                            <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                                        </Col>
                                    </Row>
                                  
                                    <div style={{ }}>
                                        <div style={{ width: '100%',  padding: "10px 20px 20px" }}>
                                            <Table columns={columns}
                                                rowKey={record => record.id_}
                                                dataSource={transferDetailList}
                                                pagination={false}
                                                scroll={{ x: 2900 }}
                                            />
                                        </div>
                                    </div>
                                </Form>
                            </div>

                        </div>
                    </div>
                </Modal>

            </span>
        );
    }

}

export default Form.create()(DoTransferModal)
